<template>
  <div>
    <a-modal
      title="库存调整"
      width="1280px"
      :visible="visible"
      :destroy-on-close="true"
      :mask-closable="false"
      @cancel="handleCancel"
    >
      <a-row type="flex" justify="end" style="padding-bottom:21px;">
        <a-col style="width:25%;" :order="1">
          <!-- <div class="outer-box">
            <div class="left-box">
              <div class="icon-box"></div>
              <input type="text" v-model="keywords" placeholder="搜索物料零件号/物料名称">
            </div>
            <div class="right-box" @click="searchCommit">
              <span>搜索</span>
            </div>
          </div> -->
          <div class="ipt-new">
            <input type="text" 
            v-model="keywords"
            placeholder="搜索商品零件号/商品名称" 
            @keyup.enter="searchCommit"
            @blur="searchBlur"
            @input="searchChange">
            <div class="ipt-icon"></div>
          </div>
        </a-col>
      </a-row>

      <!-- <a-table :columns="columns" :data-source="tableData" :pagination="false">
        <a slot="input" slot-scope="text, record">
          <a-input-number :id="record.no" v-model="record.adjust" @change="onChange(record.no, $event)" :step="1"/>
        </a>
        <template slot="lockno" slot-scope="text, record">
          <span class="text-lock">{{ record.lock }}</span>
          <span class="list-lock"></span>
        </template>
      </a-table> -->
      <!-- <table class="tb tb-b c-100">
        <thead>
          <tr>
            <th class="width-40">序号</th>
            <th class="width-96">零件号</th>
            <th class="width-96">商品名称</th>
            <th class="width-96">规格</th>
            <th class="width-96">计量单位</th>
            <th class="width-96">库存数量</th>
            <th class="width-96" :style="highlightTh">调整数量</th>
            <th class="width-96">调整后库存数量</th>
            <th class="width-96">可售库存数量</th>
            <th class="width-96">订货数量</th>
            <th class="width-96">操作</th>
          </tr>
        </thead>
      </table> -->

      <div class="scroll-area">
        <table class="tb tb-b c-100 tb-first">
          <thead>
            <tr>
              <th class="width-40 custom-cur-th">序号</th>
              <th class="width-96">零件号</th>
              <th class="width-96">商品名称</th>
              <th class="width-96">规格</th>
              <th class="width-96">计量单位</th>
              <th class="width-96">库存数量</th>
              <th class="width-96" :style="highlightTh">调整数量</th>
              <th class="width-96">调整后库存数量</th>
              <th class="width-96">可售库存数量</th>
              <th class="width-96">订货数量</th>
              <th class="width-96 text-center">操作</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(item,index) in tableData" >
              <tr :key="item.key+'row1'" v-if="item.visibleFlag">
                  <td class="width-40 text-center">{{index+1}}</td>
                  <template v-if="item.edit">
                    <td colspan="2">
                      <div class="left-box" :style="item.dupNo||item.formError?redStyle:''">
                        <div class="icon-box"></div>
                        <input type="text" 
                        :ref="'inputRef'+item.key"
                        placeholder="搜索零件号/商品名称"
                        v-model="item.materialPartNum" 
                        @keyup.enter="$event.target.blur"
                        @change="partNumIptChanged(item)"
                        @blur="partNumIptBlured(item)" />
                      </div>
                    </td>
                  </template>
                  <template v-else-if="!item.edit">
                    <td class="width-96">
                      <div class="two-cols">
                        <span>{{item.materialPartNum}}</span>
                        <span @click="setEditable(item, 'inputRef'+item.key)"></span>
                      </div>
                    </td>
                    <td class="width-96">{{item.materialName}}</td>
                  </template>
                  <td class="width-96">
                    <div class="custom-column">
                      <a-popover placement="topLeft" :overlayStyle="widthAdjust">
                        <template slot="content">
                          <div class="goods-msg">
                            <p>规格</p>
                            <p>{{item.specifications}}</p>
                          </div>                        
                          </template>
                        <span>{{item.specifications}}</span>
                      </a-popover>
                    </div>
                  </td>
                  <td class="width-96">{{item.unit}}</td>
                  <td class="width-96">{{item.inventoryNum}}</td>
                  <td class="width-96">
                       <div class='custom-inputnumber'>
                        <input type="text" 
                        v-model.trim="item.adjustmentNum" 
                        placeholder="请输入"
                        @blur="inputBlur($event, item.key, 'adjustmentNum')" 
                        @input="changeInputVal($event.target, item, 'adjustmentNum')" 
                        @paste="pastePriceHandler($event, item.key, 'adjustmentNum')"/>
                        <div class="custom-stepper">
                          <span 
                          @click="addCount($event, item, 'adjustmentNum')">+</span>
                          <span 
                          @click="minusCount($event, item, 'adjustmentNum')">-</span>
                        </div>
                      </div>
                  </td>
                  <td class="width-96">
                    {{item | countFilter('after') }}
                  </td>
                  <td class="width-96">
                    {{item | countFilter('able') }}</td>
                  <td class="width-96">
                    <div class="lock-row">
                      {{item.orderOutInventoryNum}}
                      <!-- <span class="text-grey">{{item.orderOutInventoryNum}}</span> -->
                      <!-- <span class="list-lock"></span> -->
                    </div>
                  </td>
                  <td class="width-96 text-center">
                    <a-tooltip placement="top" :overlayStyle="tooltipStyle" @click="delCertainItem(item.key)">
                      <template slot="title">
                        <span>删除</span>
                      </template>
                      <span class="delete-style"></span>
                    </a-tooltip>
                  </td>
              </tr>
              <transition name="slide" :key="item.key+'row2'" v-if="item.visibleFlag">
                  <tr class="second-row" v-if="item.dupNo || item.formError || item.countError">
                    <td class="width-40"></td>
                    <td class="width-96">
                      <div v-if="item.dupNo||item.formError">
                        <div class="tips-icon"></div><span class="error-text">{{item.dupNo?'零件号重复':item.formError?'请填写正确的零件号格式':''}}</span>
                      </div>
                    </td>
                    <td class="width-96"></td>
                    <td class="width-96"></td>
                    <td class="width-96"></td>
                    <td class="width-96"></td>
                    <td class="width-96">
                      <div v-if="item.countError">
                        <div class="tips-icon"></div><span class="error-text">请检查数量</span>
                      </div>
                    </td>
                    <td class="width-96"></td>
                    <td class="width-96"></td>
                    <td class="width-96"></td>
                    <td class="width-96"></td>
                  </tr>
                </transition>
              </template>
          </tbody>
        </table>
      </div>

      <!-- 底部搜索框部分 -->
      <!-- <a-row class="search-row" type="flex" justify="space-between">
        <a-col style="width:360px;" :order="1" class="inpt-bot">
          <div class="left-box">
            <div class="icon-box"></div>
            <input type="text" 
            v-model="keyword" 
            placeholder="搜索零件号/物料名称" 
            @input="iptChanged($event.target, 'keyword')" 
            @keyup.ctrl.86="iptBlured"
            @keyup.enter="iptBlured"
            @blur="iptBlured">
          </div>
        </a-col>
        <a-col style="width:calc(10% - 9px)" :order="2">
          <a-tooltip placement="top" :overlayStyle="tooltipStyle" @click="delAllItems">
            <template slot="title">
              <span>删除</span>
            </template>
            <span class="delete-style1 custom-bg"></span>
          </a-tooltip>
        </a-col>
      </a-row> -->

      <!-- 表格下面的搜索框部分 -->
      <table  class="tb tb-b c-100" style="margin-bottom:25px;">
        <tbody class="search-fn inpt-bot">
          <tr>
            <td class="width-40 text-center">
              {{tableData.length?tableData.length+1:1}}
            </td>
            <td style="width:19.2%">
              <div class="search-bot">
                <div class="icon-box"></div>
                <input type="text"
                ref="botIpt"
                v-model="keyword" 
                placeholder="搜索零件号/商品名称" 
                @input="iptChanged($event.target, 'keyword')" 
                @blur="iptBlured"
                @keyup.ctrl.86="iptBlured"
                @keyup.enter="iptBlured"
                >
                <div class="icon-close" v-show="closeFlag" @mousedown="clearKeyword"></div>
              </div>
            </td>
            <td class="width-96"></td>
            <td class="width-96"></td>
            <td class="width-96"></td>
            <td class="width-96"></td>
            <td class="width-96"></td>
            <td class="width-96"></td>
            <td class="width-96"></td>
            <td class="width-96 text-center">
              <a-tooltip placement="top" :overlayStyle="tooltipStyle" @click="delAllItems">
                <template slot="title">
                  <span>删除</span>
                </template>
                <span class="delete-style1 custom-bg"></span>
              </a-tooltip>
            </td>
          </tr>
        </tbody>
      </table>

      <template slot="footer" class="custom-btn">
        <div class="txt-custom item-wrap">
          <span>商品数量：</span>
          <span>{{tableData.length}}</span>
          <span>件</span>
        </div>
        <div class="item-wrap item-mid">
          <div class="bot-btn1">
            <div
              style="background: #fff;color: #272424;border: 1px solid rgba(39,36,36,0.06);;border-radius: 2px;width:72px" 
              @click="cancelSet">
                取消
            </div>
          </div>
          <div class="bot-btn2" style="margin-left:12px">
            <div :loading="confirmLoading" 
            type="primary" 
            style="width:72px;background: #d73737;border-radius: 2px;color:#fff;border: 1px solid #d73737"
            @click="handleOk()">保存</div>
          </div>
        </div>
    </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  props:{
    visible: {
      type: Boolean,
      default: false
    },
    materialCode:{
      type: Array,
      default: () => []
    }
  },
  filters: {
    countFilter: function(val,type) {
      if(type==='after'){
        return val.adjustmentNum===''?val.inventoryNum:
        isNaN(parseInt(val.inventoryNum) + parseInt(val.adjustmentNum))?'数值错误':
        parseInt(val.inventoryNum) + parseInt(val.adjustmentNum)
      }else if(type==='able'){
        return val.adjustmentNum===''?parseInt(val.inventoryNum)-parseInt(val.orderOutInventoryNum):
        isNaN(parseInt(val.inventoryNum) + parseInt(val.adjustmentNum) - parseInt(val.orderOutInventoryNum))?'数值错误':
        parseInt(val.inventoryNum) + parseInt(val.adjustmentNum) - parseInt(val.orderOutInventoryNum)
      }
    },
    // numFilter: function(val) {
    //   if(val!=='数量错误' && val<0){
    //     return '数量错误'
    //   }else {
    //     return val
    //   }
    // }
  },
  watch:{
    visible: {
      // 弹框显示后 直接获取对应的物料信息
      handler (newVal) {
        if(newVal){
          this.initKey = 1
          if(this.materialCode.length>0){
            for(let i =0;i<this.materialCode.length;i++){
              this.$store.dispatch('request', this.$api.sellerCenter.getMaterialInventoryByPartNum(this.materialCode[i])).then(res=>{
                console.log(res);
                //  如果零件号正确 则添加到数组中
                if(res.success&&res.result){
                  this.tableData.push({
                    id:res.result.id, 
                    materialPartNum: res.result.materialPartNum,
                    materialName:res.result.materialName,
                    specifications:res.result.specifications,
                    unit:res.result.unit,
                    inventoryNum:res.result.inventoryNum||0,
                    adjustmentNum:'',
                    afterAdjustmentNum:0,
                    sellInventoryNum:res.result.sellInventoryNum||0,
                    orderOutInventoryNum:res.result.orderOutInventoryNum,
                    materialId:res.result.materialId, 
                    key: this.initKey++, 
                    edit:false,
                    formError:false,
                    visibleFlag:true})
                }
                // 如果零件号错误 添加这一行数据 但是数据需要初始化
              }).catch(()=>{
                this.tableData.push({
                  id:'', 
                  materialPartNum: this.materialCode[i],
                  materialName:'',
                  specifications:'',
                  unit:'',
                  inventoryNum:0,
                  adjustmentNum:'',
                  afterAdjustmentNum:0,
                  sellInventoryNum:0,
                  orderOutInventoryNum:0,
                  materialId:'', 
                  key: this.initKey++, 
                  visibleFlag:true,
                  edit:false,
                  formError:true})
              })
            }
          }
        }else {
          this.tableData = []
          this.keywords = ''
          this.keyword = ''
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      confirmLoading: false,
      keyword:'',
      keywords:'',
      redStyle: {border:"1px solid #D73737"},
      widthAdjust:{maxWidth: '300px'},
      highlightTh:{backgroundColor: '#fff3e2', color: '#ff9003'},
      tooltipStyle:{opacity: '0.8', color: '#fff'},
      initKey:0,
      tableData:[],
      closeFlag:false
    };
  },
  methods: {
    // 点击确认触发行为
    handleOk() {
      if(this.tableData.length>0){
        // 每次检查前删除上次的重复零件号的标记
        this.tableData.forEach(item=>{
          delete item.dupNo
          this.$set(item, 'visibleFlag', true)
        })
        this.confirmLoading = true;
        // 检查零件号和含税价的填写是否有错误
        const arr = this.markError(this.tableData)
        let flag = arr.some(item=>item.formError||item.dupNo||item.countError)
        
        let tenantId = this.$store.state.user.currentTenant.id

        // 如果零件号都正确 含税价格都正确则调取接口
        if(!flag){
          // 格式化传递给后台的数据
          let formatArr = this.tableData.map(item=>{
            return {
              adjustmentNum: item.adjustmentNum,
              id: item.id,
              inventoryNum: item.inventoryNum,
              orderOutInventoryNum: item.orderOutInventoryNum,
              materialId: item.materialId,
              sellInventoryNum: parseInt(item.inventoryNum) + parseInt(item.adjustmentNum) - parseInt(item.orderOutInventoryNum),
              tenantId
            }
          })

          // 价格调整 调取接口
          this.$store.dispatch('request', this.$api.sellerCenter.inventoryAdjustment(formatArr)).then(res=>{
            console.log(res);
            this.$message.success('库存调整成功');
            this.$emit('closeModal')
          }).catch(()=>{
            this.$message.error('库存调整失败');
          }).finally(()=>{
            this.$emit('update:visible', false)
            this.tableData = []
            this.confirmLoading = false;
          })

        //   setTimeout(() => {
        //     this.$emit('update:visible', false)
        //     this.confirmLoading = false;
        // }, 2000);
        // 如果零件号不正确或含税价未填写 则错误提示
        }else {
            this.confirmLoading = false;
            this.tableData = arr
        }
      }
    },
    // 弹框关闭触发回调
    handleCancel() {
      this.clearIpt()
      this.$emit('update:visible', false)
    },
    // 清空所有的数据
    clearIpt(){
      this.keywords = ''
      this.keyword = ''
      this.tableData = []
    },
    // 搜索零件号输入框的值变化时触发
    iptChanged(target, prop){
      // 只允许input框内输入字母数字和空格
      // this[prop] = target.value.replace(/^\s*/g ,'').replace(/[^a-zA-Z0-9 ]/g,'')
      // target.value = target.value.replace(/^\s*/g ,'').replace(/[^a-zA-Z0-9 ]/g,'')
      // 开头不允许空格
      this[prop] = target.value.replace(/^\s*/g ,'')
      target.value = target.value.replace(/^\s*/g ,'')

      if(target.value){
        this.closeFlag = true
      }

      // 暂时不需要进行下拉框显示效果 功能保留
      // if(this.keyword.trim()){
      //   this.showList = true
      // }else {
      //   this.showList = false
      // }
    },
    // 搜索零件号输入框失去焦点时触发
    iptBlured(){
      if(this.keyword){
        let arr = this.keyword.trim().split(/[\s]/)
        let filterArr = arr.filter(item=>item!=='')

        // let tenantId = this.$store.state.user.currentTenant.id
        for(let i =0;i<filterArr.length;i++){
          this.$store.dispatch('request', this.$api.sellerCenter.getMaterialInventoryByPartNum(filterArr[i])).then(res=>{
            console.log(res);
            // 如果零件号正确 则新增一项
            if(res.success&&res.result){
              this.tableData.push({
                id:res.result.id, 
                materialPartNum: res.result.materialPartNum,
                materialName:res.result.materialName,
                specifications:res.result.specifications,
                unit:res.result.unit,
                inventoryNum:res.result.inventoryNum||0,
                adjustmentNum:'',
                afterAdjustmentNum:0,
                sellInventoryNum:res.result.sellInventoryNum||0,
                orderOutInventoryNum:res.result.orderOutInventoryNum,
                materialId:res.result.materialId, 
                key: this.initKey++, 
                edit:false,
                formError:false,
                visibleFlag:true})
            }
            // 如果零件号错误 则初始化这一项
          }).catch(()=>{
              this.tableData.push({
                id:'', 
                materialPartNum: filterArr[i],
                materialName:'',
                specifications:'',
                unit:'',
                inventoryNum:0,
                adjustmentNum:'',
                afterAdjustmentNum:0,
                sellInventoryNum:0,
                orderOutInventoryNum:0,
                materialId:'', 
                key: this.initKey++, 
                visibleFlag:true,
                edit:false,
                formError:true})
          })
        }

        this.keyword = ''
      }
      this.closeFlag = false
    },
    // 点击清空input框的内容 mousedown事件先触发 然后触发input的blur事件
    clearKeyword(){
      this.keyword = ''

      // 清空后input框需要重新获取焦点 定时器后于blur事件触发
      setTimeout(() => {
        this.$refs.botIpt.focus()
      }, 300)
    },
    // input框的值变化时 进行修改 只允许输入整数
    changeInputVal(target, item, prop){
        for(let i =0;i<this.tableData.length;i++){
          if(this.tableData[i].key === item.key){
            let initStr = target.value
          // 限制开头不能空格 结尾不能空格 只允许输入数字负号
          // 如果是负数则截取一个负号加数字 如果是整数则截取数字
          target.value = target.value.replace(/^\s*/g ,'').replace(/^\s*$/g ,'')
          .replace(/[^0-9-]/g,'').match(/^-+[0-9]*/g) ?
          target.value.replace(/^\s*/g ,'').replace(/^\s*$/g ,'')
          .replace(/[^0-9-]/g,'').match(/-{1}[0-9]*/g)[0] : 
          target.value.replace(/^\s*/g ,'').replace(/^\s*$/g ,'')
          .replace(/[^0-9-]/g,'').match(/^[0-9]*/g) ?
          target.value.replace(/^\s*/g ,'').replace(/^\s*$/g ,'')
          .replace(/[^0-9-]/g,'').match(/[0-9]*/g)[0] : ''    

          this.tableData[i][prop] = target.value.replace(/^\s*/g ,'').replace(/^\s*$/g ,'')
          .replace(/[^0-9-]/g,'').match(/^-+[0-9]*/g) ?
          target.value.replace(/^\s*/g ,'').replace(/^\s*$/g ,'')
          .replace(/[^0-9-]/g,'').match(/-{1}[0-9]*/g)[0] : 
          target.value.replace(/^\s*/g ,'').replace(/^\s*$/g ,'')
          .replace(/[^0-9-]/g,'').match(/^[0-9]*/g) ?
          target.value.replace(/^\s*/g ,'').replace(/^\s*$/g ,'')
          .replace(/[^0-9-]/g,'').match(/[0-9]*/g)[0] : ''
          
          // 如果库存数量减锁定库存数量小于等于调整数量 则格式化数据
          // if(parseInt(item.inventoryNum)-parseInt(item.orderOutInventoryNum)<=parseInt(target.value)){
          //   target.value = parseInt(item.inventoryNum)-parseInt(item.orderOutInventoryNum)
          //   this.tableData[i][prop] = parseInt(item.inventoryNum)-parseInt(item.orderOutInventoryNum)
          // }

            // 如果用户是粘贴的内容 则修改当前input的值
            let arr = initStr.trim().split(/[\s]/)
            let flag = initStr.indexOf(' ') === -1? true:false

          if(!flag){
            target.value = arr[0].slice(0,(arr[0].length)/2)
            this.$set(this.tableData[i], prop, arr[0].slice(0,(arr[0].length)/2))
          }
        }
      }
    },
    // 数量input框失去焦点时 格式化数字
    inputBlur(ev, key, prop){
      // 如果输入的值是空值 则重置为0
      if(!ev.target.value){
        for(let i =0;i<this.tableData.length;i++){
          if(this.tableData[i].key === key){
            ev.target.value = ''
            this.$set(this.tableData[i], prop, '')
          }
        }
      }
    },
    // 步进器加法事件
    addCount(ev, item, prop){
      let num
      if(ev.currentTarget.parentElement.parentElement.firstElementChild.value===''){
        num = 1
      }else {
        num = parseInt(ev.currentTarget.parentElement.parentElement.firstElementChild.value) + 1
      }
      ev.currentTarget.parentElement.parentElement.firstElementChild.value = num
      for(let i =0;i<this.tableData.length;i++){
        if(this.tableData[i].key === item.key){
          this.$set(this.tableData[i], prop, num)
        }
      }
    },
    // 步进器减法事件
    minusCount(ev, item, prop){
      let num
      if(ev.currentTarget.parentElement.parentElement.firstElementChild.value==='') {
        num = -1
      }else {
        num = parseInt(ev.currentTarget.parentElement.parentElement.firstElementChild.value) - 1
      }

      ev.currentTarget.parentElement.parentElement.firstElementChild.value = num
      for(let i =0;i<this.tableData.length;i++){
        if(this.tableData[i].key === item.key){
          this.$set(this.tableData[i], prop, num)
        }
      }
    },
    // 点击按钮后 对含税价和零件号进行校验 不符合要求的进行标识
    markError(arr){
      for(let i = 0;i<arr.length;i++){
        // 如果零件号为空 则错误提示
        if(!arr[i].materialPartNum.trim()){
          arr[i].formError = true
        }
        if(isNaN(parseInt(arr[i].adjustmentNum))){
          arr[i].countError = true
        }else {
          arr[i].countError = false
        }
        // 如果零件号重复 则错误提示
        for(let j = i+1;j<arr.length;j++){
          if(arr[j].dupNo!==true&&arr[i].formError!==true){
            if(arr[i].materialPartNum===arr[j].materialPartNum){
              arr[j].dupNo = true
            }else {
              arr[j].dupNo = false
            }
          }
        }
      }
      return arr
    },
    // 本地搜索效果 搜索零件号 物料名称
    searchCommit(){
      console.log(this.keywords);
      // 如果用户没有输入关键字 则所有数据都显示
      if(!this.keywords){
        this.tableData.forEach(item=>{
          this.$set(item, 'visibleFlag', true)
        })
      }else {
        // 如果用户输入关键字 那么匹配到的数据显示 没匹配到的隐藏
        this.tableData.forEach(item=>{
          if(item.materialPartNum.toLowerCase() === this.keywords.toLowerCase() || item.materialName === this.keywords){
            this.$set(item, 'visibleFlag', true)
          }else {
            this.$set(item, 'visibleFlag', false)
          }
        })
      }
    },
    // 搜索框的值失去焦点时触发
    searchBlur(){
      if(this.keywords){
        this.searchCommit()
      }
    },
    // 搜索框的值发生变化时触发
    searchChange(){
      if(!this.keywords){
        this.searchCommit()
      }
    },
    // 用户在input粘贴内容后 多行数据进行修改
    pastePriceHandler(ev, key, prop){
      // 找到当前粘贴的input对应的数据索引
      let index = 0
      for(let i =0;i<this.tableData.length;i++){
        if(this.tableData[i].key === key){
          index = i
        }
      }

      // 获取到用户粘贴板的内容
      let arr = ev.clipboardData.getData('Text').trim().split(/[\s]/)
      let newArr = arr.filter(item=>item!=='')
      let myLength = index+1+newArr.length>this.tableData.length?this.tableData.length:index+1+newArr.length
      if(newArr.length>0){
        for(let k=0;k<newArr.length;k++){
            // 如果用户粘贴的长度大于总数组的长度 则超出项不再赋值
            if(index+k+1 <= myLength){
              this.tableData[index+k][prop] = parseInt(newArr[k])
            }
        }
      }
    },
    // 删除表格的某一行
    delCertainItem(key){
      this.tableData = this.tableData.filter(item=>item.key!==key)
    },
    // 删除表格的所有内容
    delAllItems(){
      this.tableData = []
    },
    // 零件号输入框的值变化后 重新搜索该零件号对应的数据
    partNumIptChanged(item){
      this.$store.dispatch('request', this.$api.sellerCenter.getMaterialInventoryByPartNum(item.materialPartNum)).then((res)=>{
      // this.$store.dispatch('request', this.$api.sellerCenter.getMaterialDetails(item.manufacturerPartNum,'23e09b3f1b02a30acee9a16217adca80')).then((res)=>{
        console.log(res);
        if(res.success&&res.result){
          for(let i = 0;i<this.tableData.length;i++){
            if(this.tableData[i].key === item.key){
              this.$set(this.tableData[i], 'id', res.result.id)
              this.$set(this.tableData[i], 'materialPartNum', res.result.materialPartNum)
              this.$set(this.tableData[i], 'materialName', res.result.materialName)
              this.$set(this.tableData[i], 'specifications', res.result.specifications)
              this.$set(this.tableData[i], 'unit', res.result.unit)
              this.$set(this.tableData[i], 'inventoryNum', res.result.inventoryNum||0)
              this.$set(this.tableData[i], 'adjustmentNum', '')
              this.$set(this.tableData[i], 'afterAdjustmentNum', 0)
              this.$set(this.tableData[i], 'sellInventoryNum', res.result.sellInventoryNum||0)
              this.$set(this.tableData[i], 'orderOutInventoryNum', res.result.orderOutInventoryNum)
              this.$set(this.tableData[i], 'materialId', res.result.materialId)
              this.$set(this.tableData[i], 'formError', false)
              this.$set(this.tableData[i], 'edit', false)
            }
          }
        }
      }).catch(()=>{
          for(let i = 0;i<this.tableData.length;i++){
            if(this.tableData[i].key === item.key){
              this.$set(this.tableData[i], 'id', '')
              this.$set(this.tableData[i], 'materialPartNum', item.materialPartNum)
              this.$set(this.tableData[i], 'materialName', '')
              this.$set(this.tableData[i], 'specifications', '')
              this.$set(this.tableData[i], 'unit', '')
              this.$set(this.tableData[i], 'inventoryNum', 0)
              this.$set(this.tableData[i], 'adjustmentNum', '')
              this.$set(this.tableData[i], 'afterAdjustmentNum', 0)
              this.$set(this.tableData[i], 'sellInventoryNum', 0)
              this.$set(this.tableData[i], 'orderOutInventoryNum', 0)
              this.$set(this.tableData[i], 'materialId', '')
              this.$set(this.tableData[i], 'formError', true)
              this.$set(this.tableData[i], 'edit', false)
            }
          }
      })
    },
    partNumIptBlured(item){
      for(let i = 0;i<this.tableData.length;i++){
        if(this.tableData[i].key === item.key){
          this.$set(this.tableData[i], 'edit', false)

          // 检查当前的零件号是否重复 求交集
          const nums = [this.tableData[i]].map(item => item.materialPartNum);
          const intersection = this.tableData.filter(item => nums.includes(item.materialPartNum))
          // console.log(intersection);
          if(intersection.length>1){
            this.$set(this.tableData[i], 'dupNo', true)
          }else {
            this.$set(this.tableData[i], 'dupNo', false)
          }
        }
      }
    },
    setEditable(row, refStr){
      this.tableData.forEach((item,index)=>{
        if(item.key===row.key){
          this.$set(this.tableData[index], 'edit', true)
        }
      })
      this.$nextTick(function () {
        for(let key in this.$refs){
          if(key===refStr){
            this.$refs[key][0].focus()
            // console.log(this.$refs[key]);
          }
        }
      },50)
    },
    cancelSet(){
      this.$emit('update:visible', false)
      this.tableData = []
      this.confirmLoading = false;
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .ant-modal {
  top: 21%;
}
/deep/ .ant-modal-title {
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  color: #272424;
}
/deep/ .ant-modal-footer {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
}
/deep/ .ant-modal-header {
  padding: 16px 24px;
}
/deep/ .ant-modal-close-x {
  width: 16px;
  height: 16px;
  margin-right: 24px;
}
.outer-box {
  height: 32px;
  background: #ffffff;
  border: 1px solid rgba(39,36,36,0.06);
  border-radius: 3px;
  display: flex;
  .right-box {
    width: 48px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #272424;
    border-left: 1px solid rgba(39,36,36,0.06);
    cursor: pointer;
  }
  .left-box{
    flex: 1;
  }
}
.left-box {
  display: flex;
  align-items: center;
  .icon-box {
    width: 13px;
    height: 13px;
    margin-left: 12px;
    margin-right: 13px;
    background: url('../../../../assets/image/sellerHub/searchicon.png') center no-repeat;
    background-size: 13px 13px;
  }
  input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #272424;
  }
}
.inpt-bot .left-box {
  height: 32px;
  background: #ffffff;
  border: 1px solid rgba(39,36,36,0.06);
  border-radius: 3px;
}
.txt-custom {
  line-height: 32px;
  text-align: left;
  padding-left: 24px;
}
.txt-custom {
  span:first-child {
    font-size: 12px;
    color: @newColorGreyFontM;
  }
  span:nth-child(2) {
    color: @activeRed;
    font-size: 22px;
    font-weight: 700;
  }
  span:last-child {
    padding-left: 4px;
    opacity: 0.6;
    font-size: 12px;
    color: @newColorGreyFontM;
  }
}
.item-wrap {
  flex: 1;
}
.item-mid {
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
}
.text-lock {
  padding-right:5px; 
  color: #272424;
  opacity: 0.6;
}
.width-100{
  width: 10%;
}
.width-96 {
  width: 9.6%;
}
.width-40 {
  width: 4%;
}
table{
  border-collapse:collapse;
  border-spacing:0;
  table-layout:fixed;
}
.c-100 {
	width: 100%;
}
.tb th { 
  padding:11px 9px; 
  border-bottom:1px solid rgba(39,36,36,0.06); 
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  color: #272424;
  vertical-align: middle;
  background-color: #f9f9f9;
}
.tb td { 
  padding:4px 9px; 
  background-color:#fff; 
  border-bottom:1px solid rgba(39,36,36,0.06); 
  word-wrap: break-word; 
  word-break:break-all; 
  vertical-align: middle;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #272424;
}
.tb tr:hover>td {
  background-color: rgba(215,55,55, .08)!important;
}
.search-fn tr:hover>td {
		background-color: #fff !important;
}
.tb-b {border-top:1px solid rgba(39,36,36,0.06);}
.tb-b th , .tb-b td {border-color: rgba(39,36,36,0.06);}
.width-125{
  width: 12.5%;
}
table .left-box {
  height: 32px;
  background: #ffffff;
  border: 1px solid rgba(39,36,36,0.06);
  border-radius: 3px;
  width: 100%;
}
table .left-box input {
  height: 100%;
  overflow: hidden;
}
table .custom-column{
  position: relative;
  white-space:nowrap; 
  text-overflow: ellipsis; 
  overflow: hidden;
}
table .delete-style{
  cursor: pointer;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  background: url('../../../../assets/image/sellerHub/deleteicon.png') center no-repeat;
  background-size: 16px 16px;
}
.scroll-area {
  // max-height: 240px;
  // overflow-y: auto;
  table {
    border-top: none;
    border-bottom: none;
    tbody tr:last-child td {
      border-bottom: none;
    }
  }
}
.tb-first tbody {
  display: block;
  max-height: 242px;
  overflow-y: scroll;
}
 
.tb-first thead,
.tb-first tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.custom-inputnumber{
  display: inline-block;
  width: 100%;
  height: 32px;
  display: flex;
  background: #ffffff;
  border: 1px solid rgba(39,36,36,0.06);
  border-radius: 3px;
  box-sizing: border-box;
  input {
    flex: 1;
    width: calc(100% - 21px);
    border: none;
    outline: none;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #272424;
    box-sizing: border-box;
    padding-left: 10px;
  }
  .custom-stepper{
    width: 21px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(39,36,36,0.06);
    span {
      display: block;
      height: 15px;
      text-align: center;
      line-height: 15px;
      color: #525050;
      cursor: pointer;
      -webkit-user-select: none;
      &:hover{
        color: #D73737;
      }
      &:last-child {
        border-top: 1px solid rgba(39,36,36,0.06);
        line-height: 14px;
      }
    }
  }
}
.search-row{
  padding:13px 0 13px 14px; 
  border-bottom:1px solid rgba(39,36,36,0.06); 
  border-top:1px solid rgba(39,36,36,0.06); 
  margin-bottom:25px;
}
table .second-row td {
  padding-top: 8px;
  padding-bottom: 8px;
}
.tips-icon{
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: middle;
  background: url('../../../../assets/image/sellerHub/errorinfo.png') center no-repeat;
  background-size: 15px 15px;
}
.error-text {
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #272424;
  margin-left: 4px;
}
table .second-row td {
  padding-right: 0px;
}
.slide-enter,
.slide-leave-to {
  opacity: 0;
}

// .slide-enter-active,
// .slide-leave-active {
//   // transition: opacity .3s linear;
// }

.slide-enter-to,
.slide-leave {
  opacity: 1;
}
.list-lock{
  display: inline-block;
  width: 14px;
  height: 15px;
  background: url('../../../../assets/image/sellerHub/lockicon.png') center no-repeat;
  background-size: 14px 15px;
  vertical-align: middle;
  margin-top: -3px;
  margin-left: 8px;
}
.text-grey{
  opacity: 0.6;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #272424;
}
tbody::-webkit-scrollbar{
  width:0;
}
.delete-style1{
  cursor: pointer;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  background: url('../../../../assets/image/sellerHub/deleteicon.png') center no-repeat;
  background-size: 16px 16px;
}
.custom-bg{
  background: url('../../../../assets/image/sellerHub/deletegrey.png') center no-repeat;
  background-size: 16px 16px;
  &:hover {
    background: url('../../../../assets/image/sellerHub/deleteicon.png') center no-repeat;
    background-size: 16px 16px;
  }
}
.custom-ipt .left-box {
  border-color: transparent;
  background-color: transparent;
}
.custom-ipt input{
  border-color: transparent;
  background-color: transparent;
}
.goods-msg {
  font-size: 12px;
  color: #272424;
  p:nth-of-type(1) {
    font-weight: 600;
    border-left: 2px solid @activeRed;
    padding-left: 4px;
    height: 10px;
    line-height: 10px;
    margin-bottom: 6px;
  }
  p:last-child {
    margin-bottom: 0;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #272424;
    line-height: 17px;
  }
  p>span {
    width: 60px;
    opacity: 0.6;
    display: inline-block;
  }
}
.ipt-new {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(39,36,36,0.06);
  border-radius: 2px;
  position: relative;
  input {
    width: 100%;
    height: 32px;
    border: 0px;
    outline: none;
    padding-left: 12px;
    padding-right: 28px;
  }
  .ipt-icon {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 10px;
    width: 13px;
    height: 13px;
    vertical-align: middle;
    background: url('../../../../assets/image/sellerHub/searchicon.png') center no-repeat;
    background-size: 13px 13px;
  }
}
.text-center {
  text-align: center;
}
.two-cols {
  width: 100%;
  span:last-child {
    cursor: pointer;
    margin-left: 6px;
    margin-top: -3px;
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    background: url('../../../../assets/image/sellerHub/editicon.png') center no-repeat;
    background-size: 14px 14px;
  }
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  opacity: 0.2;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  opacity: 0.2;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  opacity: 0.2;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  opacity: 0.2;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
input {
  font-size: 12px;
}
.search-bot {
  position: relative;
  width: 100%;
  height: 100%;
  .icon-box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    margin-left: 9px;
    margin-right: 10px;
    background: url('../../../../assets/image/sellerHub/searchicon.png') center no-repeat;
    background-size: 13px 13px;
  }
  input {
    height: 32px;
    width: 100%;
    border: 0px;
    outline: none;
    background: #ffffff;
    border: 1px solid rgba(39,36,36,0.06);
    border-radius: 2px;
    padding-left: 32px;
  }
  input::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    outline: 1px solid red;
  }
  .icon-close {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    margin-left: 9px;
    margin-right: 10px;
    background: url('../../../../assets/image/sellerHub/clearicon.png') center no-repeat;
    background-size: 13px 13px;
  }
}
.bot-btn1>div,
.bot-btn2>div {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
}
.bot-btn1 /deep/ .ant-btn:hover, .ant-btn:focus {
  color: #272424 !important;
  background-color: #fff !important;
  border-color: rgba(39,36,36,0.06) !important;
}
.bot-btn2 /deep/ .ant-btn:hover, .ant-btn:focus {
  color: #fff !important;
  background-color: #d73737 !important;
  border-color: #d73737 !important;
}
.bot-btn2 /deep/ .ant-btn-primary:hover span, .ant-btn-primary:focus span {
  color: #fff !important;
}
/deep/ .ant-btn-primary:hover span, .ant-btn-primary:focus span{
  color: #fff !important;
}
.custom-cur-th {
  padding-right: 3px!important;
}
</style>